<template>
    <div id = "option-text">
        <div v-for = "i in optionObj.array"
        :class = "i === optionVal ? 'selected':''"> {{i}}</div>
    </div>
</template>

<script>
  export default {
    props: {
      optionObj: {
        type: Object,
        require: true
      },
      optionVal: {
        type: String,
        twoWay: true,
        require: true
      }
    },
    ready () {
      this.decSelection = function () {
        let _array = this.optionObj.array
        let i = 0
        for (; i < _array.length; i++) {
          if (_array[i] === this.optionVal) {
            if (i !== 0) {
              this.optionVal = _array[i - 1]
              break
            }
          }
        }
      }

      this.incSelection = function () {
        let _array = this.optionObj.array
        let i = 0
        for (; i < _array.length; i++) {
          if (_array[i] === this.optionVal) {
            if (i !== _array.length - 1) {
              this.optionVal = _array[i + 1]
              break
            }
          }
        }
      }
    }
  }
</script>

<style lang = "less">
  #option-text {
    border: 3px solid grey;
    width: 150px;
    background-color: white;
    position: relative;
    left: 130px;
  }

  .selected {
    background-color: black;
    color: white;
  }
</style>
